<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/Hui.css" />
		<title>提前还款</title>
		<style type="text/css">
			body,
			html {
				background-color: #ededed;
				/*background-color: #66CCFF;*/
			}
			
			header {
				height: 500px;
				width: auto;
				background: linear-gradient(to bottom right, #3dcfd1, #268fd2);
			}
			main {
				margin: 0 30px;
				font-size: 35px;
				overflow: hidden;
			}
			main div {
				background-color: #fff;
			}
			main div span {
				margin-left: 20px;
			}
			header div {
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
				padding: 20px 0;
			}
			#ahead {
				width: 80%;
				padding: 40px 0px;
				border-radius: 60px;
				color: #fc8d2a;
				background-color: #fff;
				border: none; 
				box-shadow: 0 0 20px rgba(41, 44, 167, 0.22);
				position: relative;
				top: -66px
			}
			.sum {
				color: #fff;
				font-size: 60px;
			}
			
			header div span {
				margin-right: 20px;
				color: #cbecff;
			}
			
			.bankCode {
				font-style: normal;
			}
			
			.overdue {
				background-color: #FC8D2A;
				color: #fff;
				border-radius: 25px;
				padding: 0 20px;
			}
			.right {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: row-reverse;
				flex-direction: row-reverse;
				vertical-align: middle;
			}
			.result {
				width: 200px;
				height: 100px;
				display: block;
				position: relative;
				top: 18%;
				border-radius: 20px;
				border: none;
				background-color: #fff;
			}
			.result_ok {
				border: 1px solid #999;
				color: #999;
			}
			
			.result_no {
				border: 1px solid #ff485c;
				color: #ff485c;
			}
			.money {
				font-size: 60px;
				color: #fc8d2a;
			}
			.dataAmount {
				position: relative;
				padding: 2% 5% 2% 5%;
				border-bottom: 3px dashed #ccc;
				/*border: 1px solid red;*/
				border-radius: 20px 20px 0px 0px;
			}
1			.H-555 {
				color: #555;
			}
			.detail {
				/*height: 500px;*/
				padding: 2% 5% 2% 5%;
				border-radius: 0px 0px 20px 20px;
				margin-bottom: 20px;
			}
			.threeL {
				height: 0;
				width: 0;
				border-top: 50px solid transparent;
				/*border-right:50px solid palegreen;*/
				border-bottom: 50px solid transparent;
				border-left: 70px solid #ededed;
				position: absolute;
				top: 72.5%;
				left: -5%;
			}
			.threeR {
				height: 0;
				width: 0;
				border-top: 50px solid transparent;
				border-right: 70px solid #EDEDED;
				border-bottom: 50px solid transparent;
				/*border-left: 70px solid #ededed;*/
				position: absolute;
				top: 72.5%;
				right: -5%;
			}
			i{
				font-style: normal;
			}
		</style>

	</head>

	<body>
	</body>
	<script src="javascript/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var datas=['一','二','三','四','五','六','七','八','九','十','十一','十二','十三'];
		var str = '';
		str += '<header>' + '<div style="color: #cbecff;padding-top: 63px;">' + '应还金额（元）' + '</div>';
		str += '<div class="sum">' + '88888.88' + '</div>';
		str += '<div><span>' + '扣款账户' + '</span><span class="bankType">' + '农业银行储蓄卡（' + '<i class="bankCode">2330</i>）</span></div>';
		str += '</header>';
		str += '<div class="H-text-align-center btn"><button id="ahead">' + '提前还款' + '</button></div>';
		str += '<main>';
		//遍历函数开始
		function page() {
			for(var i = 0; i < 10 ; i++) {
				str += '<div class="H-flexbox-horizontal dataAmount"><div class="threeL"></div><div class="threeR"></div><div class="left">';
				str += '<span class="H-555">' + '第' + '<i class="data">'+datas[i]+'</i>' + '期' + '</span>';
				str += '<span class="times H-555">' + '2018-08-08' + '</span>';
				str += '<span class="H-display-inline-block overdue">' + '已逾期' + '</span>';
				str += '<br /><span class="money">' + '2604.00' + '</span></div>';
				str += '<div class="right H-flex-item "><button class="result result_ok ">' + '已还清' + '</button></div></div>';
				str += '<div class="detail H-flexbox-vertical H-padding-vertical-top-10">';
				str += '<span class="H-555">' + '本金：' + '</span>';
				str += '<span class="H-555">' + '利息：' + '</span>';
				str += '<span class="H-555">' + '计费时间：' + '</span></div>';
			}
		}
		page(); //执行函数
		str += '</main>';
		$("body").html(str);
	</script>

</html>